<template>
	<view class="page-container"
		:style="'background:url(' + baseImageUrl + '/invite/invite_detail_bg@2x.png);background-size: 100% 1448rpx;background-repeat: no-repeat;'">
		<view style="width: 100%; height: 56rpx"></view>
		<image class="detail-headpic" :src="giftCoupons.inviterLogo"
			style="width: 160rpx; height: 160rpx; background: #eee; border-radius: 50%"></image>
		<view class="head-title">
			Hi，
			<text>{{ giftCoupons.inviterName }}</text>
			送你一个大礼包
		</view>
<!-- :style="'background:url(' + baseImageUrl + '/invite/invite_detail_popbg@2x.png);background-size: 100% 100%;background-repeat: no-repeat;'" -->
		<view class="gift-container"
			>
			<view style="width: 100%; height: 48rpx"></view>
			<view class="gift-pop-title">好运有好礼</view>
			<!-- 一个奖品 -->
			<block v-if="(point && giftCouponList.length == 1) || (point && !giftCouponList)">
				<view class="gift-pop-item">
					<view class="pop-item-img" v-if="point">
						<image :src="baseImageUrl + '/invite/invite_detail_point@2x.png'"
							style="width: 180rpx; height: 122rpx"></image>
						<view class="item-img-txt">赠送{{ giftCoupons.point }}积分</view>
					</view>
					<view class="pop-item-img" v-else>
						<block v-for="(item, index) in giftCouponList" :key="index">
							<view class="pop-item-img" v-if="item.couponType == '1' || item.couponType == '3'">
								<image :src="baseImageUrl + '/invite/invite_detail_coupon1@2x.png'"
									style="width: 180rpx; height: 122rpx"></image>
								<view class="item-img-txt">{{item.couponType == '1' ? '满' : '立'}}减券{{ item.typeCount }}张</view>
							</view>
							
							<view class="pop-item-img" v-if="item.couponType == '2' || item.couponType == '4'">
								<image :src="baseImageUrl + '/invite/invite_detail_coupon2@2x.png'"
									style="width: 180rpx; height: 122rpx"></image>
								<view class="item-img-txt">折扣券{{ item.typeCount }}张</view>
							</view>
							
							<view class="pop-item-img" v-if="item.couponType == '5' || item.couponType == '6'">
								<image :src="staticBaseUrl + '/static/image/common/cash-coupon.png'"
									style="width: 180rpx; height: 122rpx"></image>
								<view class="item-img-txt">代金券{{ item.typeCount }}张</view>
							</view>
							<view class="pop-item-img" v-if="item.couponType == '7'">
								<image :src="staticBaseUrl + '/static/image/exchangeCoupon.png'"
									style="width: 180rpx; height: 122rpx"></image>
								<view class="item-img-txt">兑换券{{ item.typeCount }}张</view>
							</view>
							<view class="pop-item-img" v-if="item.couponType == '8'">
								<image :src="item.detailsImg ? util.attachedUrl(item.detailsImg, baseImgUrl) : staticBaseUrl + '/static/image/elec-coupon.png'"
									style="width: 180rpx; height: 122rpx"></image>
								<view class="item-img-txt">电子卡券{{ item.typeCount }}张</view>
							</view>
						</block>
					</view>
				</view>
			</block>
			<!-- 多个奖品 -->
			<view class="gift-pop-item" v-if="giftCoupons.point > 0">
				<view class="pop-item-img">
					<image :src="baseImageUrl + '/invite/invite_detail_point@2x.png'"
						style="width: 112rpx; height: 88rpx"></image>
					<view class="item-img-txt">赠送{{ giftCoupons.point }}积分</view>
				</view>
				<block v-for="(item, index) in giftCouponList" :key="index">
					<view class="pop-item-img" v-if="item.couponType == '1' || item.couponType == '3'">
						<image :src="baseImageUrl + '/invite/invite_detail_coupon1@2x.png'"
							style="width: 112rpx; height: 88rpx"></image>
						<view class="item-img-txt">{{item.couponType == '1' ? '满' : '立'}}减券{{ item.typeCount }}张</view>
					</view>

					<view class="pop-item-img" v-if="item.couponType == '2' || item.couponType == '4'">
						<image :src="baseImageUrl + '/invite/invite_detail_coupon2@2x.png'"
							style="width: 112rpx; height: 88rpx"></image>
						<view class="item-img-txt">折扣券{{ item.typeCount }}张</view>
					</view>
					
					<view class="pop-item-img" v-if="item.couponType == '5' || item.couponType == '6'">
						<image :src="staticBaseUrl + '/static/image/common/cash-coupon.png'"
							style="width: 112rpx; height: 88rpx"></image>
						<view class="item-img-txt">代金券{{ item.typeCount }}张</view>
					</view>
					<view class="pop-item-img" v-if="item.couponType == '7'">
						<image :src="staticBaseUrl + '/static/image/exchangeCoupon.png'"
							style="width: 112rpx; height: 88rpx"></image>
						<view class="item-img-txt">兑换券{{ item.typeCount }}张</view>
					</view>
					<view class="pop-item-img" v-if="item.couponType == '8'">
						<image :src="item.detailsImg ? util.attachedUrl(item.detailsImg, baseImgUrl) : staticBaseUrl + '/static/image/elec-coupon.png'"
							style="width: 112rpx; height: 88rpx"></image>
						<view class="item-img-txt">电子卡券{{ item.typeCount }}张</view>
					</view>
				</block>
			</view>
			<view class="receiveBtn">
				<image :src="baseImageUrl + '/lottery/wheel-pop-btn@2x.png'" style="width: 680rpx; height: 80rpx">
				</image>
				<view class="receiveBtn-txt" @tap="acceptInvite">立即领取</view>
			</view>
		</view>

		<block v-if="inviteeList && inviteeList.length > 0">
			<view class="detail-received-num">
				<text class="line1"></text>
				<text class="received-num-txt">已有{{ giftCoupons.count }}人领到</text>
				<text class="line2"></text>
			</view>

			<view class="swiper-container">
				<swiper class="detail-received-list" :vertical="true" :autoplay="true" duration="2000" :circular="true"
					interval="2000">
					<swiper-item class="detail-received-item" v-for="(item, index) in inviteeList" :key="index">
						<view class="item-name">{{ item.inviteeName }}</view>

						<view class="item-phone">{{ item.inviteePhone }}</view>
					</swiper-item>
				</swiper>
			</view>
		</block>

		<!-- 获得礼包弹窗 -->
		<u-popup :show="show" @close="onClose" custom-style="width:100%;border-radius:24rpx;background:rgba(0,0,0,0);">
			<view class="temp-pop-container">
				<image class="temp-pop-bg" :src="baseImageUrl + '/lottery/wheel-pop-bg@2x.png'"
					style="width: 100%; height: 888rpx" mode="widthFix"></image>
				<view class="temp-pop-content">
					<view class="temp-content-title">恭喜您获得了</view>
					<view class="temp-content-reward">邀请有礼大礼包</view>
					<view style="display: flex; justify-content: center">
						<view class="temp-content-reward-list">
							<view class="temp-content-reward-item" v-if="giftCoupons.point > 0">
								<image :src="baseImageUrl + '/invite/invite_detail_point@2x.png'"
									style="width: 112rpx; height: 88rpx"></image>
								<view class="temp-reward-name">赠送{{ giftCoupons.point }}积分</view>
							</view>
							<block v-for="(coupon, index) in giftCouponList" :key="index">								
								<view class="temp-content-reward-item" v-if="coupon.couponType == '1' || coupon.couponType == '3'">
									<image :src="baseImageUrl + '/invite/invite_detail_coupon1@2x.png'"
										style="width: 112rpx; height: 88rpx"></image>
									<view class="temp-reward-name">{{coupon.couponType == '1' ? '满' : '立'}}减券{{ coupon.typeCount }}张</view>
								</view>
								
								<view class="temp-content-reward-item" v-if="coupon.couponType == '2' || coupon.couponType == '4'">
									<image :src="baseImageUrl + '/invite/invite_detail_coupon2@2x.png'"
										style="width: 112rpx; height: 88rpx"></image>
									<view class="temp-reward-name">折扣券{{ coupon.typeCount }}张</view>
								</view>
								
								<view class="temp-content-reward-item" v-if="coupon.couponType == '5' || coupon.couponType == '6'">
									<image :src="staticBaseUrl + '/static/image/common/cash-coupon.png'"
										style="width: 112rpx; height: 88rpx"></image>
									<view class="temp-reward-name">代金券{{ coupon.typeCount }}张</view>
								</view>
								<view class="temp-content-reward-item" v-if="coupon.couponType == '7'">
									<image :src="staticBaseUrl + '/static/image/exchangeCoupon.png'"
										style="width: 112rpx; height: 88rpx"></image>
									<view class="temp-reward-name">兑换券{{ coupon.typeCount }}张</view>
								</view>
								<view class="temp-content-reward-item" v-if="coupon.couponType == '8'">
									<image :src="coupon.detailsImg ? util.attachedUrl(coupon.detailsImg, baseImgUrl) : staticBaseUrl + '/static/image/elec-coupon.png'"
										style="width: 112rpx; height: 88rpx"></image>
									<view class="temp-reward-name">电子卡券{{ coupon.typeCount }}张</view>
								</view>
								
								
							</block>
						</view>
					</view>
					<view class="temp-content-reward-btn" @tap="toGiftDetail">
						<image :src="baseImageUrl + '/lottery/wheel-pop-btn@2x.png'"
							style="width: 100%; height: 100rpx"></image>
						<view>查看更多</view>
					</view>
				</view>
				<image class="temp-pop-close" :src="baseImageUrl + '/lottery/wheel-pop-close@2x.png'"
					style="width: 160rpx; height: 160rpx" @tap="onClose"></image>
			</view>
		</u-popup>
	</view>
</template>
<script module="util" lang="wxs" src="../../../utils/util.wxs"></script>
<script>
	const app = getApp();

	var utils = require('../../../utils/util.js');
	import {
		http
	} from '@/utils/commonRequest.js'
	
	import {baseDomain, appId, third_plat_appid, baseImgUrl, staticBaseUrl} from '@/utils/constant.js'

	var interval;
	export default {
		components: {},
		data() {
			return {
				staticBaseUrl: staticBaseUrl,
				baseImgUrl: baseImgUrl,
				baseUrl: 'https://mall-dev.chinaums.com/ecology_mall_dev/web-plat',
				baseImageUrl: app.globalData.baseImageUrl,
				inviterId: null,

				//邀请者ID
				inviteActivity: null,

				//活动信息
				newUser: null,

				//是否为新用户
				awardCount: 0,

				//成功邀请人数
				awardRecordList: null,

				//滚动获奖通告
				giftpackId: null,

				//礼包ID
				activityId: null,

				//活动ID
				giftCouponList: '',

				giftCoupons: {
					inviterLogo: '',
					inviterName: '',
					point: '',
					count: ''
				},

				inviteeList: '',

				//被邀请人列表
				show: false,

				platId: null,
				point: '',

				coupon: {
					couponType: '',
					typeCount: ''
				}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (undefined != options.inviterId) {
				console.log('来源:分享,inviterId = ' + options.inviterId);
				this.inviterId = options.inviterId;
			} else if (undefined != options.scene) {
				console.log('来源:小程序码,inviterId = ' + decodeURIComponent(options.scene));
				this.inviterId = decodeURIComponent(options.scene);
			} else {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}

			var that = this;
			// this.$checkLogin().then(() => {
			// 	that.getInviteInfo();
			// })
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let that = this;
			this.$checkLogin().then(() => {
				that.getInviteInfo();
				that.getRecord();
			})
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {
			if (null != interval) {
				clearInterval(interval);
				interval = null;
			}
		},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			if (null != interval) {
				clearInterval(interval);
				interval = null;
			}
		},
		methods: {
			/** 获取邀请信息 */
			getInviteInfo: function() {
				let that = this;
				http
					.get('inviteWithGift/getInviteActivityBrief', {
						params: {
							inviterId: that.inviterId
						}
					})
					.then((res) => {
						res = res.data
						if ('200' == res.code) {
							console.log(res);
							that.inviteActivity = res.inviteActivity
							that.newUser = res.newUser
							that.giftpackId = res.inviteActivity.award.giftpackId
							that.activityId = res.inviteActivity.id
							that.getInviteGiftInfo();

							if (res.newUser) {
								app.globalData.inviterId = that.inviterId;
								app.globalData.inviteActId = that.inviteActivity.id;
							}
						} else {
							utils.message(res.msg, () => {
								uni.reLaunch({
									url: '/pages/index/index'
								});
							});
						}
					})
					.catch((err) => {
						utils.message('活动信息查询异常，请稍后再试', () => {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						});
						console.log(err);
					});
			},

			/** 获取页面信息 */
			getInviteGiftInfo: function() {
				let that = this;
				let params = {
					giftpackId: that.giftpackId,
					id: that.activityId,
					inviterId: that.inviterId
				};
				http.get('inviteWithGift/getInviteGiftInfo', {
						params: params
					})
					.then((res) => {
						res = res.data
						if (res.code == '200') {
							console.log(res);
							that.giftCoupons = res.giftCoupons
							that.giftCouponList = res.giftCoupons.giftCouponList
							that.inviteeList = res.giftCoupons.inviteeList
						} else {
							util.message('获取礼包信息失败', function() {
								uni.switchTab({
									url: '/pages/index/index'
								});
							});
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},

			//定时获取获奖记录及邀请人数
			getRecord: function() {
				if (null != interval || null == this.inviteActivity) {
					return;
				}

				var that = this;
				interval = setInterval(() => {
					that.getInviteGiftInfo();
				}, 15000);
			},

			/**
			 * 接受邀请
			 */
			acceptInvite: function() {
				let that = this;

				if (null == that.newUser) {
					return;
				}

				if (that.newUser) {
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '/pages/regist/regist?inviterId=' + that.inviterId + '&inviteActId=' + that.activityId
					});
					// #endif
					// #ifdef H5
					let redirect_uri = encodeURIComponent(baseDomain + '/pages/userReg/userReg?inviterId=' + that.inviterId + '&inviteActId=' + that.activityId)
					window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo&state=001&component_appid=" + third_plat_appid + "&connect_redirect=1#wechat_redirect"
					// #endif
				} else {
					utils.message('您已经注册过了，快去其他地方逛逛吧~', () => {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					});
				}
			},

			onClose: function() {
				let that = this;
				that.show = false
				uni.switchTab({
					url: '/pages/index/index'
				});
			},

			toGiftDetail: function() {
				let that = this;
				that.show = false
				uni.navigateTo({
					url: '/subPackages/lottery/pages/giftPkgDetail/giftPkgDetail?id=' + that.giftpackId
				});
			}
		}
	};
</script>
<style>
	.page-container {
		height: 1448rpx;
	}

	.detail-headpic {
		display: block;
		margin: 0 auto;
	}

	.head-title {
		text-align: center;
		font-size: 36rpx;
		color: #ffffff;
		height: 50rpx;
		line-height: 50rpx;
		font-weight: 500;
		margin-top: 50rpx;
		letter-spacing: 0.52rpx;
	}

	.gift-container {
		width: 666rpx;
		height: 722rpx;
		margin: 64rpx auto 0;
		position: relative;
	}

	.gift-pop-title {
		text-align: center;
		font-size: 48rpx;
		height: 52rpx;
		line-height: 52rpx;
		color: #ff1d1d;
		font-weight: 600;
		letter-spacing: 4rpx;
	}

	.gift-pop-item {
		display: flex;
		justify-content: space-around;
		margin-top: 52rpx;
		padding: 0 70rpx;
		flex-wrap: wrap;
	}

	.item-img-txt {
		text-align: center;
		font-size: 24rpx;
		color: #a32f05;
		font-weight: 500;
		line-height: 34rpx;
		width: 122rpx;
		margin: 0 auto;
	}

	.receiveBtn {
		width: 100%;
		position: absolute;
		bottom: 84rpx;
		left: 0;
	}

	.receiveBtn-txt {
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #e10000;
		font-weight: 500;
	}

	.detail-received-num {
		text-align: center;
	}

	.received-num-txt {
		color: #fff;
		font-size: 36rpx;
		font-weight: 400;
		letter-spacing: 2rpx;
	}

	.line1 {
		display: inline-block;
		width: 112rpx;
		height: 2rpx;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
		margin: 0 16rpx 12rpx;
	}

	.line2 {
		display: inline-block;
		width: 112rpx;
		height: 2rpx;
		background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
		margin: 0 16rpx 12rpx;
	}

	.swiper-container {
		padding: 0 10%;
	}

	.detail-received-list {
		background-color: rgba(226, 24, 24, 0.5);
		margin: 36rpx auto 0;
		border-radius: 38rpx;
		padding: 0 48rpx;
		height: 76rpx;
	}

	.detail-received-item {
		display: flex;
		justify-content: space-between;
		height: 76rpx;
		align-items: center;
	}

	.item-name,
	.item-phone {
		font-size: 36rpx;
		color: #ffd97c;
		letter-spacing: 2rpx;
		font-weight: 400;
	}

	/* 抽奖结果弹出框 */
	.temp-pop-container {
		width: 100%;
		height: 100%;
	}

	.temp-pop-close {
		margin-left: 50%;
		transform: translateX(-50%);
		position: relative;
		top: -10rpx;
	}

	.temp-pop-content {
		width: 100%;
		position: absolute;
		top: 312rpx;
		left: 0;
	}

	.temp-content-title {
		text-align: center;
		font-size: 48rpx;
		color: #a32f05;
		font-weight: 600;
	}

	.temp-content-reward {
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #a32f05;
		margin: 12rpx 0 20rpx;
	}

	.temp-content-reward-list {
		max-width: 410rpx;
		display: flex;
	}

	.temp-reward-name {
		width: 128rpx;
		font-size: 24rpx;
		color: #a32f05;
		font-weight: 500;
		/* margin-top: 20rpx; */
		text-align: center;
	}

	.temp-content-reward-item {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.temp-content-reward-btn {
		margin-top: 130rpx;
		color: #782a00;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		line-height: 50rpx;
		position: relative;
		width: 100%;
	}

	.temp-content-reward-btn view {
		position: absolute;
		top: 22rpx;
		left: 0;
		width: 100%;
		/* font-family: PingFangSC-Medium,PingFang SC; */
	}

	.temp-pop-content-fail {
		width: 100%;
		position: absolute;
		top: 312rpx;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #a32f05;
	}

	.temp-content-fail-img {
		width: 176rpx;
		height: 176rpx;
	}

	.temp-content-fail-line1 {
		font-weight: bold;
		font-size: 36rpx;
		margin: 12rpx 0;
	}

	.temp-content-fail-line2 {
		font-size: 26rpx;
	}
</style>
